<!--
	系统中没有两种群聊同时出现的情况,暂时只显示一个群聊,目前设计师只有上课有自定义群组群聊
	type:上课,竞赛演练必传,其他的不需要传(竞赛演练:drill,上课:class)
	typeId:上课,竞赛演练必传,其他的不需要传(竞赛演练:场景id,上课:班级id)
	groupType:群聊必传(0.工程接入组 1.课件用户组 2.自定义群组)
	userList:[{userId:"",userName:""}]
	groupList:[{id:"",name:""}]
	@filterUsers:当前用户已经是所有用户,没有分页查询等,可不传
	@filterGroups:当前群组已经是所有群组,没有分页查询等,可不传
-->
<template>
	<div v-if="!((this.type == 'drill' || this.type == 'class') && !this.typeId)">
		<Badge :count="notReadNum" style="line-height: initial;" @click.native="switchShow()" v-if="isDistributed!=1">
			<slot name="icon" v-if="$slots.icon"></slot>
			<Icon type="ios-text-outline" :size="30" v-else/>
		</Badge>
		<div class="chatRoom" id="chatRoom" v-show="showChat">
			<Row class="h100">
				<!--聊天框左侧:只设置了个人和聊天两个类型-->
				<Col span="2" class="h100 chatType">
					<ul>
						<li class="type" style="height:60px;cursor:auto;">
							<img :src="avatar" alt="" class="avatar" />
						</li>
						<li class="type" :class="{active:curType == 1}" @click="changeType(1)" :style="{'letter-spacing': eleWidth > 1200 ? '1em':'0'}">个<br v-if="eleWidth < 1200">人
							<Badge class="hasMessage" status="error" v-if="hasUserMessage" />
						</li>
						<li v-if="groupList.length > 0" class="type" :class="{active:curType == 2}" @click="changeType(2)">群<br>组
							<Badge class="hasMessage" status="error" v-if="hasGroupMessage" />
						</li>
					</ul>
				</Col>
				<!--聊天框右侧-->
				<Col span="7" class="h100 left chatUser">
					<!--私聊-->
					<div v-if="curType == 1" style="height:100%">
						<Input v-show="showUserQuery" v-model.trim="queryUserName" placeholder="输入名称搜索..." class="searchInput" clearable @on-change="filterUsers" />
						<div id="userList" :style="{marginTop:showUserQuery ? '' : '20px'}">
							<div class="user" :style="{background: curUser.userId ==  user.userId ? 'var(--chat-user-hover-bgcolor)':''}" v-for="user in showUsers" :key="user.id" @click="getCurUser(user)" :id="user.id">
								<span class="name" :title="user.userName">{{user.userName}}</span>
								<Badge :count="user.msgCount"></Badge>
							</div>
						</div>
					</div>
					<!--群聊-->
					<div v-else style="height:100%">
						<Input v-show="showGroupQuery" v-model.trim="queryGroupName" placeholder="输入名称搜索..." class="searchInput" clearable @on-change="filterGroups" />
						<div id="userList" :style="{marginTop:showGroupQuery ? '' : '20px'}">
							<div class="user" :style="{background: curGroup.id ==  group.id ? '#dbe1f1':''}" v-for="group in showGroups" :key="group.id" @click="getCurGroup(group)">
								<span class="name" :title="group.name">{{group.name}}</span>
								<Badge :count="group.msgCount"></Badge>
							</div>
						</div>
					</div>
				</Col>
				<Col span="15" class="h100 right chatContent" style="overflow: hidden">
					<div class="chatContentTop" id="curChat">
						<span>{{curType == 1 ? curUser.userName : curGroup.name}}</span>
						<Icon type="md-close" size="20" @click.native="hideChat" />
					</div>
					<div class="chatContentMid" id="chatMsgBox" ref="chatMsgBox">
						<!--聊天内容-->
						<div v-for="msg in getMsgList()" :key="msg.createTime" :class="msg.showType">
							<div class="time">
								<Time :time="msg.sendTime" type="datetime" />
							</div>
							<div class="name">{{msg.senderName}}</div>
							<div class="content">
								<div v-if="msg.msgType == 0">{{msg.messages}}</div>
								<div v-if="msg.msgType == 1">
									<img :src="msg.messages" alt="" style="max-width:100%;" @load='loadImg' @click="showImgModal(msg.messages)" />
								</div>
							</div>
						</div>
					</div>
					<div class="chatContentBottom">
						<Input class="contentInput" v-model="content" :maxlength="60000" type="textarea" placeholder="输入内容..." />
						<div class="opWrap">
							<div class="fileBtn">
								<Upload ref="upload" :action="uploadAction" :show-upload-list="false" :format="['jpg','jpeg','png']" 
								:on-format-error="handleFormatError" :on-success="getImageUrl" :before-upload="handleBeforeUpload"
								 :on-exceeded-size="handleUploadSize" :headers="uploadHeader" :disabled="((curType == 1 && !curUser.userId) || (curType != 1 && !curGroup.id))">
									<Icon type="ios-image-outline" size="24" />
								</Upload>
							</div>
							<div class="sendBtnWrap">
								<Button size="small" type="info" class="sendBtn" :disabled="disSendBtn()" @click="sendMessage(0)">发送</Button>
							</div>
						</div>
					</div>
				</Col>
			</Row>
		</div>
		<Modal v-model="imgModal" title="图片显示" footer-hide width="60">
			<img :src="viewImgSrc" alt="" style="max-width:100%;" />
		</Modal>
	</div>
</template>

<script>
	import {
		chatSingle,
		setChatSingleRead,
		getNotReadChatWithUser,
		getNotReadChatWithGroup,
		setChatGroupRead,
		chatGroup,
		getNotReadChat
	} from '@/api/boardcast_new.js'
	import chatFun from "./resize-drop"
	import encryption from '@/libs/encryption.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: 'chatRoom',
		props: {
			'userList': {
				type: Array,
				default: () => {
					return []
				}
			},
			'userListAll': {
				type: Array,
				default: () => {
					return []
				}
			},
			'groupList': {
				type: Array,
				default: () => {
					return []
				}
			},
			'type':{
				type: String, //场景聊天和上课聊天必填场景'drill',上课'class'
			},
			'typeId': { //场景聊天和上课聊天必填,场景聊天传场景id,上课聊天传班级id
				type: String,
				required:this.type == 'drill' || this.type == 'class' ? true : false
			},
			'groupType': { //0.工程接入组 1.课件用户组 2.自定义群组
				type: Number,
				default: 2 //目前设计师只有自定义群聊,暂时初始化为2
			},
			'isDistributed':{
				type: Number,
			}
		},
		mixins: [chatFun],
		data() {
			let October = sessionStorage.getItem('November')
			try{
				October = JSON.parse(encryption.SelfUseDecrypt(October))
			}catch(error){
				//不同平台使用可能会出现的问题
				console.log(error,'用户信息获取失败,请修改信息获取方式');
			}
			return {
				USER_ID: October.userId,
				USER_Name: October.nickname,
				avatar: October.avatar,
				curType: 1,
				curUser: {},
				content: '',
				msgInfo: {
					userId: '',
					msgType: 1,
					msg: ''
				},
				queryUserName: '', //查询
				queryGroupName: '', //查询
				curGroup: {},
				sendBtnStyle: {
					'float': 'right',
					'padding': '2px 10px',
					'margin-right': '10px'
				},
				uploadAction: "/api/minio/upload/permanent?visibility=company&type=images&bucket=images",
				uploadHeader: {
					Authorization: localStorage.token,
					Accept: '*/*'
				},
				uploadList: [],
				uploaderror: false,
				filename: '',
				showTip: false,
				imgModal: false,
				viewImgSrc: '',
				disSend: false,
				userTotal: 0,
				groupTotal: 0,
				showChat:false,
        intervalfun:-1,
				notReadChat:[]
			}
		},
		filters: {

		},
		computed: {
			...mapState('board',['chatNotice']), //新消息
			showUsers() {
				this.userList.forEach(user => {
					user.msgCount = 0;
					this.notReadChat.forEach(chat => {
						if(user.userId == chat.sender) {
							user.msgCount = chat.num;
						}
					});
				})
				//如果没有传递过滤方法
				if(!this.$listeners['filterUsers'] && this.queryUserName){
					return this.userList.filter(user => user.userName.indexOf(this.queryUserName) != -1)
				}else{
					return  this.userList;
				}
			},
			showGroups() {
				this.groupList.forEach(group => {
					group.msgCount = 0;
					this.notReadChat.forEach(chat => {
						if(group.id == chat.groupId) {
							group.msgCount = chat.num;
						}
					});
				})
				//如果没有传递过滤方法
				if(!this.$listeners['filterGroups'] && this.queryUserName){
					return this.groupList.filter(group => group.name.indexOf(this.queryGroupName) != -1)
				}else{
					return this.groupList
				}
			},
			notReadNum(){
				let total = 0;
				if(this.notReadChat.length){
					total = this.notReadChat.map(item => item.num).reduce(function(a, b) {
						return a + b;
					});
				}
				return total
			},
			hasGroupMessage() { //是否有群聊信息
				if(this.groupList.length == 0) {
					return;
				}
				let count = this.groupList.map(item => item.msgCount).reduce(function(a, b) {
					return a + b;
				});
				return count > 0;
			},
			hasUserMessage() { //是否有私聊信息
				if(this.userList.length == 0) {
					return;
				}
				let count = this.userList.map(item => item.msgCount).reduce(function(a, b) {
					return a + b;
				});
				return count > 0;
			},
			showUserQuery(){
				return !(!this.queryUserName && this.userList.length <= 1);
			},
			showGroupQuery(){
				return !(!this.queryGroupName && this.groupList.length <= 1);
			},
		},
		watch: {
			chatNotice: {
				handler(val, oldval) {
					if((this.type == 'drill' || this.type == 'class') && !this.typeId){
						console.error('sceneId不能为空');
						return;
					}
					let message = JSON.parse(val);
					if((this.typeId && this.typeId != message.sceneId) || (!this.typeId && message.sceneId)) { //不是当前场景或上课的
						return
					}
					if(!message.groupId) {
						//私聊
						let user = this.userList.find(user => user.userId == message.sender);
						if(!user) {
							this.getNotReadChat();
							return;
						}
						message.senderName = user.userName;
						message.receiverName = this.USER_Name;
						message.showType = 'receiver';
						message.avatar = user.avatar;
						user.msgList.push(message);
						//把当前收到信息的人挪到第一位
						this.userToTop(user);
						if(this.needSetAsRead(message,'user')) {
							this.setChatSingleRead(message.sender);
						} else {
							user.msgCount++;
							this.getNotReadChat();
						}
					} else {
						let group = this.groupList.find(group => group.id == message.groupId)
						if(!group) {
							this.getNotReadChat();
							return;
						}
						message.senderName = message.senderName;
						message.receiverName = this.USER_Name;
						message.showType = 'receiver';
						group.msgList.push(message);
						//把当前收到信息的人挪到第一位
						this.groupToTop(group);
						if(this.needSetAsRead(message,'group')) {
							this.setChatGroupRead(message.groupId);
						} else {
							group.msgCount++;
							this.getNotReadChat();
						}
					}
					this.scrollTopContentBottom();
				},
				deep: true
			},
			showChat(val) {
				if(!val) {
					if(this.queryGroupName) {
						this.queryGroupName = '';
						this.filterGroups()
					}
					if(this.queryUserName) {
						this.queryUserName = '';
						this.filterUsers();
					}
				} else {
					this.initSort();
					//设置或更新当前人员或组
					this.setOrUpCurChat();
				}
			}
		},
		mounted() {
			this.getNotReadChat();
			this.scrollTop = 0;
			let userListEle = document.getElementById('userList');
			userListEle.addEventListener('scroll', (e) => {
				var scrollHeight = userListEle.scrollHeight;
				var scrollTop = userListEle.scrollTop;
				if(this.scrollTop < userListEle.scrollTop) {
					this.scrollTop = userListEle.scrollTop;
				}
				var clientHeight = userListEle.clientHeight;
				if(scrollHeight - clientHeight <= (scrollTop + 3)) {
					if(this.scrollTop <= userListEle.scrollTop) {
						this.scrollTop = userListEle.scrollTop;
						this.$emit('filterUsers', '', this.userName);
					}
				}
			})
      
      
      // this.intervalfun = setInterval(()=>{
      //   this.getNotReadChat()
			// 	this.setOrUpCurChat()
      //   // this.getNotReadChatWithUser(this.curUser)
      // },10 * 1000) // 10秒轮询一次数据
		},
		beforeDestroy() {
      // clearInterval(this.intervalfun)
		},
		methods: {
			...mapMutations('board', ['setNotReadChat']),
			switchShow(){
				this.showChat = !this.showChat;
			},
			//获取未读消息数
			getNotReadChat(){
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				let sceneId = this.typeId;
		    	getNotReadChat(sceneId).then(data => {
		    		if(data.code == 1){
		    			this.notReadChat = data.data.items;
		    		}
		    	})
		    },
			loadImg() {
				let div = this.$refs.chatMsgBox; //document.getElementById('chatMsgBox');
				div.scrollTop = div.scrollHeight;
			},
			scrollTopContentBottom() {
				this.$nextTick(() => {
					let div = this.$refs.chatMsgBox; //document.getElementById('chatMsgBox');
					div.scrollTop = div.scrollHeight;
				});
			},
			//初始化排序
			initSort() {
				if(this.curType == 1) {
					this.userList.sort((user1, user2) => {
						return user1.userName.toLowerCase() < user2.userName.toLowerCase() ? -1 : 1
					}).sort((user1, user2) => {
						return user2.msgCount - user1.msgCount
					})
				} else {
					this.groupList.sort((group1, group2) => {
						return group1.userName.toLowerCase() < group2.userName.toLowerCase() ? -1 : 1
					}).sort((group1, group2) => {
						return group2.msgCount - group1.msgCount
					})
				}
			},
			//获取聊天记录框显示数据
			getMsgList(){
				if(this.curType == 1){
					return this.curUser.msgList
				}else{
					return this.curGroup.msgList
				}
			},
			//把user位置挪到第一位
			userToTop(user) {
				let userIndex = this.userList.findIndex(item => item.userId == user.userId)
				this.userList.splice(userIndex, 1);
				this.userList.unshift(user);
			},
			//把group位置挪到第一位
			groupToTop(group) {
				let groupIndex = this.groupList.findIndex(item => item.groupId == group.groupId)
				this.groupList.splice(groupIndex, 1);
				this.groupList.unshift(group);
			},
			//是否需要设为已读
			needSetAsRead(message,type) {
				if(type == 'user'){
					return this.showChat && this.curType == 1 && this.curUser.userId == message.sender
				}else{
					return this.showChat && this.curType == 2 && this.curGroup.id == message.groupId
				}
			},
			//过滤
			filterUsers() {
				if(this.$listeners['filterUsers']){
					this.$emit('filterUsers', 1, this.queryUserName);
				}
			},
			filterGroups() {
				if(this.$listeners['filterGroups']){
					this.$emit('filterGroups', 1, this.queryGroupName);
				}
			},
			//禁用发送
			disSendBtn() {
				if(this.curType == 1) {
					return(!this.curUser.userId || !this.content || this.disSend)
				} else {
					return(!this.curGroup.id || !this.content || this.disSend)
				}
			},
			//发送消息
			sendMessage(msgType) {
				if(this.curType == 1) {
					this.sendUserMessage(msgType);
				} else {
					this.sendGroupMessage(msgType);
				}
			},
			sendUserMessage(msgType) {
				this.disSend = true;
				if(!(this.curUser && this.curUser.userId)) {
					this.$Message.error('请先选择聊天用户');
					return;
				}
				let obj = {
					userId: this.curUser.userId,
					msgType: msgType,
					msg: msgType == 0 ? this.content : this.fileData
				}
				let contentObj = {
						msg: obj.msg
					}
					// 竞赛、演练聊天室，typeId为场景Id,额外设置场景ID，用户清空场景公告和聊天信息
					// 上课设置班级Id,typeId为班级Id,传参同样为场景Id
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				contentObj.sceneId = this.typeId
				chatSingle(obj, contentObj).then(data => {
					if(data.code == 1) {
						let user = this.userList.filter(user => user.userId == obj.userId)[0];
						let message = {
							senderName: this.USER_Name,
							sendTime: new Date().getTime(),
							sender: this.USER_ID,
							receiver: this.curUser.id,
							receiverName: this.curUser.username,
							msgType: obj.msgType,
							messages: msgType == 0 ? this.content : this.fileData,
							showType: 'sender',
							avatar: ''
						};
						//	    			user.msgCount ++;
						user.msgList.push(message)
						if (msgType === 0) { // 点击发送按钮，发送后需要清空输入的文字
							this.content = '';
							// 当前用户有草稿，将聊天内容设置为草稿内容，否则清空
							let curUserId = this.curUser.userId
							if (curUserId) {
								let element = this.userList.find(item => item.userId === curUserId)
								console.log(element)
								this.$set(element, 'manuscript', '')
							}
						}
						this.fileData = '';
						console.log('发送给' + obj.userId + "----" + this.content)
						this.scrollTopContentBottom();
					} else {
						this.$Message.error(data.message || '发送失败');
					}
					this.disSend = false;
				}).catch(error => {
					this.$Message.error('发送失败');
					console.log(error);
					this.disSend = false;
				})
			},
			sendGroupMessage(msgType) {
				this.disSend = true;
				if(!(this.curGroup && this.curGroup.id)) {
					this.$Message.error('请先选择聊天群组');
					return;
				}
				let obj = {
					groupId: this.curGroup.id,
					//	    		  userId:'64c05c59599a44a9814cc56d80e5219c',
					groupType: this.groupType,
					msgType: msgType,
					msg: msgType == 0 ? this.content : this.fileData
				}
				let contentObj = {
						msg: obj.msg
					}
					// 竞赛、演练聊天室，typeId为场景Id,额外设置场景ID，用户清空场景公告和聊天信息
					// 上课设置班级Id,typeId为班级Id,传参同样为场景Id
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				contentObj.sceneId = this.typeId
				chatGroup(obj, contentObj).then(data => {
					if(data.code == 1) {
						let group = this.groupList.filter(group => group.id == obj.groupId)[0];
						let message = {
							senderName: this.USER_Name,
							sendTime: new Date().getTime(),
							sender: this.USER_ID,
							receiver: this.curGroup.id,
							receiverName: this.curGroup.name,
							msgType: obj.msgType,
							messages: msgType == 0 ? this.content : this.fileData,
							showType: 'sender',
						};
						this.curGroup.msgList.push(message)
						if (msgType === 0) { // 点击发送按钮，发送后需要清空输入的文字
							this.content = '';
						}
						this.fileData = '';
						console.log('发送给' + obj.userId + "----" + this.content)
						this.scrollTopContentBottom();
					} else {
						this.$Message.error(data.message || '发送失败');
					}
					this.disSend = false;
				}).catch(error => {
					this.$Message.error('发送失败');
					console.log(error);
					this.disSend = false;
				})
			},
			//个人标为已读
			setChatSingleRead(userId) {
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				let sceneId = this.typeId;
				setChatSingleRead(sceneId, userId).then(data => {
					if(data.code == 1) {
						this.getNotReadChat();
					}
				})
			},
			//群组标为已读
			setChatGroupRead(groupId) {
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				let sceneId = this.typeId;
				setChatGroupRead(sceneId, groupId).then(data => {
					if(data.code == 1) {
						this.getNotReadChat();
					}
				})
			},
			//获取用户未读消息数
			getNotReadChatWithUser(user) {
				if((this.type == 'drill' || this.type == 'class') && !this.typeId){
					this.$Message.error('sceneId不能为空');
					return;
				}
				let sceneId = this.typeId
				getNotReadChatWithUser(sceneId, user.userId).then(data => {
					if(data.code == 1) {
						user.msgList = data.data.items;
						user.msgList.forEach(item => {
							if(item.sender == user.userId) { //如果是别人发给我
								item.showType = 'receiver';
								item.senderName = user.userName;
								item.receiverName = this.USER_Name;
								item.avatar = user.avatar;
							} else {
								item.showType = 'sender';
								item.senderName = this.USER_Name;
								item.receiverName = user.userName;
								item.avatar = this.avatar;
							}
						});
						this.scrollTopContentBottom();
					}
				})
			},
			//获取组未读消息数
			getNotReadChatWithGroup(group) {
				getNotReadChatWithGroup(group.id).then(data => {
					if(data.code == 1) {
						group.msgList = data.data.items;
						group.msgList.forEach(item => {
							if(item.sender != this.USER_ID) { //如果是别人发给我
								item.showType = 'receiver';
								item.senderName = item.senderName;
								item.receiverName = group.name;
							} else {
								item.showType = 'sender';
								item.senderName = this.USER_Name;
								item.receiverName = group.name;
							}
						});
						this.scrollTopContentBottom();
					}
				})
			},
			setOrUpCurChat() {
				if(this.curType == 1) {
					if(this.showUsers.length > 0 && !this.curUser.userId) {
						this.getCurUser(this.showUsers[0]);
					} else if(this.showUsers.length > 0 && this.curUser.userId) {
						if(this.curUser.msgCount > 0) {
							this.getNotReadChatWithUser(this.curUser);
							this.setChatSingleRead(this.curUser.userId);
						} else {
							this.scrollTopContentBottom();
						}
					}
				} else if(this.curType == 2) {
					if(this.showGroups.length > 0 && !this.curGroup.id) {
						//触发默认点击事件
						this.getCurGroup(this.showGroups[0]);
					} else if(this.showGroups.length > 0 && this.curGroup.id) {
						if(this.curGroup.msgCount > 0) {
							this.getNotReadChatWithGroup(this.curGroup);
							this.setChatGroupRead(this.curGroup.id);
						} else {
							this.scrollTopContentBottom();
						}
					}
				}
			},
			//切换个人和组
			changeType(type) {
				this.curType = type;
				this.initSort();
				this.setOrUpCurChat();
			},
			//获取当前用户
			getCurUser(user) {
				// 选择新的聊天对象前有数据，将聊天内容设置进该用户的草稿属性中
				let perUserId = this.curUser.userId
				if (perUserId) {
					let element = this.userListAll.find(item => item.userId === perUserId)
					if(element)this.$set(element, 'manuscript', this.content)
				}
				this.curUser = user;
				// 当前用户有草稿，将聊天内容设置为草稿内容，否则清空
				let curUserId = user.userId
				if (curUserId) {
					let element = this.userListAll.find(item => item.userId === curUserId)
					console.log(element)
					this.content = element ? element.manuscript : ''
				}
				this.getNotReadChatWithUser(user);
				this.setChatSingleRead(user.userId);
			},
			//获取当前组
			getCurGroup(group) {
				this.curGroup = group;
				this.getNotReadChatWithGroup(group);
				this.setChatGroupRead(group.id);
			},
			hideChat() {
				this.showChat = false;
			},
			//发送文件
			handleFormatError() {
				this.$Message.error('请上传jpg,jpeg,png格式图片!');
			},
			handleUploadSize() {
				this.$Message.error('图片大小不能超过5M!');
			},
			handleBeforeUpload() {
				this.uploadList = this.$refs.upload.fileList;
				return true;
			},
			getImageUrl(res) {
				if(res.code == 1) {
					let src = res.data; //.slice(1);
					this.fileData = `/Learn/${src}`;
					this.sendMessage(1);
				} else {
					this.$Message.warning(res.message);
				}
			},
			showImgModal(src) {
				this.imgModal = true;
				this.viewImgSrc = src;
			},
			clearMsg(){
				this.getNotReadChat();
				if(this.curType == 1){
					this.curUser.msgList = [];
				}else{
					this.curGroup.msgList = [];
				}
			}
		},
		destroyed() {

		}
	}
</script>

<style scoped>
	#chatRoom {
		position: fixed;
		right: 3px;
		bottom: 3px;
		width: 800px;
		height: 600px;
		background: #fff;
		/*border: 1px solid #ccc;*/
		border-radius: 5px;
		z-index: 999;
		box-shadow: 0 0 25px 1px #d0dffe;
		overflow: hidden;
		color: var(--chat-default-color);
	}
	
	.h100 {
		height: 100%!important;
	}
	
	.chatType {
		overflow: hidden;
		 background: var(--chat-nav-bgcolor);
	}
	
	.chatType .type.active {
		background: var(--chat-nav-item-active-bgcolor);
    color: var(--chat-nav-item-active-color);
	}
	
	.chatType .type {
		position: relative;
		text-align: center;
		/*height:40px;*/
		line-height: 1.1;
		padding: 10px 0;
		/*background:#ccc;*/
		color: var(--chat-nav-item-color);
		/*border-right: 1px solid #fff;*/
		cursor: pointer;
		font-size: 14px;
	}
	
	.chatType .type .hasMessage {
		position: absolute;
		top: 0px;
		right: 0px;
	}
	
	#chatRoom .left {
		background: var(--chat-userlist-bgcolor);
		overflow: hidden;
		border-right: 1px solid #e7ebf6;
	}
	
	#userList {
		height: calc(100% - 52px);
		overflow: hidden auto;
		/*margin-right:-15px;*/
	}
	
	#userList .user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 2;
		border-bottom: 1px solid #fff;
		padding: 5px 15px;
		cursor: pointer;
	}
	
	#userList .user .name {
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: normal;
		white-space: nowrap;
	}
	
	#chatRoom .avatar {
		display: inline-block;
		/*float:left;*/
		width: 30px;
		height: 30px;
		vertical-align: middle;
		margin-right: 4px;
		border-radius: 50%;
		/*margin-top:8px;*/
	}
	
	#chatRoom .chatContentTop {
		height: 50px;
		padding: 10px;
		font-size: 16px;
		border-bottom: 1px solid #e7ebf6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#chatRoom .chatContentMid {
		height: 60%;
		line-height: 16px;
		overflow: hidden auto;
		margin: 10px 0;
	}
	
	#chatRoom .chatContentBottom {
		position: relative;
		height: calc(40% - 70px);
		border-top: 1px solid #e7ebf6;
	}
	
	#chatRoom .chatContentBottom .contentInput {
		height: calc(100% - 40px);
		border-bottom: 1px solid #e7ebf6
	}
	
	#chatRoom .chatContentBottom .contentInput /deep/ textarea {
		border: none;
		box-shadow: none;
		resize: none;
		height: 100%;
	}
	#chatRoom .chatContentBottom .contentInput /deep/ textarea.ivu-input {
		color: var(--chat-default-color);
	}
	
	#chatRoom .chatContentBottom .opWrap {
		position: absolute;
		width: 100%;
		bottom: 0px;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: initial;
	}
	
	/deep/#chatRoom .chatContentBottom .ivu-btn.sendBtn {
		float: right;
		padding: 2px 10px;
	}
	
	#chatRoom .receiver {
		text-align: left;
		overflow: hidden;
	}
	
	#chatRoom .sender {
		overflow: hidden;
	}
	
	#chatRoom .sender .name {
		text-align: right;
		margin: 10px 6px;
	}
	
	#chatRoom .sender .avatar {
		float: right;
	}
	
	#chatRoom .receiver .name {
		text-align: left;
		margin: 10px 6px;
	}
	
	#chatRoom .content {
		position: relative;
		padding: 8px 5px;
		color: var(--chat-box-color);
		word-wrap: break-word;
		word-break: break-all;
		/*min-width: 25%;*/
		margin-top: -4px;
		min-width: 30px;
		max-width: 60%;
		border-radius: 5px;
	}
	
	#chatRoom .receiver .content {
		float: left;
		margin-left: 6px;
		background: var(--chat-box-bgcolor);
    border: 1px solid var(--chat-box-border-color);
	}
	
	#chatRoom .sender .content {
		float: right;
		margin-right: 6px;
		background: #d0dffe;
		border: 1px solid #85abff;
	}
	
	#chatRoom .sender .content:after,
	#chatRoom .sender .content:before,
	#chatRoom .receiver .content:before,
	#chatRoom .receiver .content:after {
		content: '';
		position: absolute;
		/*top:-4px;*/
		right: 10.5px;
		/*margin-top:-5px;*/
		width: 0;
		height: 0;
	}
	
	#chatRoom .sender .content:before {
		/*right:-4px;
		margin-top: -3px;
		border-left: 4px solid #d0dffe;
		border-top: 4px solid transparent;
	    border-bottom: 4px solid transparent;*/
		top: -5px;
		right: 11px;
		border-width: 0 5px 5px;
		border-style: solid;
		border-color: transparent transparent var(--chat-box-bgcolor);
		z-index: 1;
	}
	
	#chatRoom .sender .content:after {
		top: -6px;
		/*border-left: 6px solid #85abff;
		border-top: 6px solid transparent;
	    border-bottom: 6px solid transparent;*/
		border-width: 0 6px 6px;
		border-style: solid;
		border-color: transparent transparent var(--chat-box-border-color);
		z-index: -1;
	}
	
	#chatRoom .receiver .content:before {
		/*left:-6px;
		border-right: 6px solid #e7ebf6;
		border-top: 6px solid transparent;
	    border-bottom: 6px solid transparent;*/
		top: -4px;
		left: 11px;
		border-width: 0 5px 5px;
		border-style: solid;
		border-color: transparent transparent var(--chat-box-bgcolor);
		z-index: 1;
	}
	
	#chatRoom .receiver .content:after {
		/*left: -4px;
    	margin-top: -3px;
		border-right: 4px solid #f8fbff;
		border-top: 4px solid transparent;
	    border-bottom: 4px solid transparent;*/
		top: -5px;
    	left: 10.5px;
		border-width: 0 6px 6px;
		border-style: solid;
		border-color: transparent transparent var(--chat-box-border-color);
		/*z-index: -1;*/
	}
	
	#chatRoom .time {
		text-align: center;
		margin: 10px;
		clear: both;
	}
	
	#chatRoom .time span {
		border-radius: 4px;
		/*background: #eee;*/
		padding: 4px;
		font-size: 12px;
		color: #bbb;
	}
	
	#chatRoom .ivu-collapse-content>.ivu-collapse-content-box {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	#chatRoom .ivu-collapse-content {
		padding: 0px;
	}
	
	#chatRoom .searchInput input {
		background: #e8ecf8;
		border: none;
	}
	
	#chatRoom .searchInput {
		width: 90%;
		margin: 10px;
	}
	/deep/#chatRoom .ivu-badge-status-dot{
		height: 4px!important;
		border-radius: 50%!important;
	}
</style>